<template>
	<view class="content">
		<u-navbar
			title="银行卡管理" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="list" :style="{height: `calc(100vh - 68px - ${navHeight}px)`}" v-if="list">
			<view class="empty-box" v-if="list.length == 0">
				<u-empty mode="list" text="尚未添加银行卡"></u-empty>
			</view>
			<view v-else>
				<view class="card-item flex-b clickable" v-for="(item, index) in list" :key="index"
					@click="clickEdit(item)">
					<view>
						<view class="card-no">
							{{item.card_number}}
							<text class="tag" v-if="item.is_default">默认</text>
						</view>
						<view class="card-name">
							{{item.bank_name}}({{item.branch_name}})
						</view>
					</view>
					<view class="edit-txt" @click="clickEdit(item)">
						编辑
					</view>
				</view>
			</view>
		</view>
		<view class="fix-bottm" :style="{bottom:`${bottomHeight}px`}">
			<u-button :color="`${mainColor}`" shape="circle" @click="clickAddBankCard"
				:custom-style="{color: `${textColor}`}">添加银行卡</u-button>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { getBankList } from '@/api';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				list: null
			}
		},
		onLoad() {
			this.getSystemInfo();
		},
		onShow() {
			this.loadBankList();
		},
		methods: {
			async loadBankList() {
				const res = await getBankList();
				this.list = res.data;
			},
			clickEdit(item) {
				uni.navigateTo({
					url:`/pages/account/edit-bank?id=${item.id}`
				})
			},
			clickAddBankCard() {
				uni.navigateTo({
					url:'/pages/account/add-bank'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list {	
	.empty-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.card-item {
	    padding: 10px 20px;
	    border-bottom: 1px solid #e4e4e4;
		
		.card-name {
		    margin-top: 10px;
		    font-size: 14px;
		}
		
		.card-no {
			display: flex;
			gap: 8px;
			align-items: center;
			
			.tag {
				color: #e33233;
				background-color: #ffe3e0; 
				font-size: 12px;
				padding: 2px 8px;
				border-radius: 4px;
			}
		}
		
		.edit-txt {
		    display: flex;
		    align-items: center;
		}
		
		.edit-txt:active {
			color: #666;
		}
		
	}
}

.clickable:active {
	background-color: #eee;
}

.fix-bottm {
    position: fixed;
    bottom: 0;
    left: 0;
	right: 0;
    padding: 10px;
    box-sizing: border-box;
	background-color: #fff;
}
</style>
